import React from 'react';
import {Carousel, WingBlank} from 'antd-mobile';
import bannerImage from '../assets/banner.jpg'
import bannerImage2 from '../assets/golive/pic_dt.png'

class CarouselImage extends React.Component {
    state = {
        data: [bannerImage,bannerImage2],
        imgHeight: 176,
    };

    componentDidMount() {
        // simulate img loading
        // setTimeout(() => {
        //     this.setState({
        //         data: [bannerImage,bannerImage2],
        //     });
        // }, 100);
    }

    render() {
        return (
            <WingBlank>
                <Carousel
                    autoplay={false}
                    infinite
                    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                    afterChange={index => console.log('slide to', index)}
                >
                    {this.state.data.map((val) => (
                        <a
                            key={val}
                            href="http://www.alipay.com"
                            style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
                        >
                            <img
                                // src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
                                src={val}
                                alt=""
                                style={{width: '100%', verticalAlign: 'top'}}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({imgHeight: 'auto'});
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </WingBlank>
        );
    }
}

export default CarouselImage
